<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!--  svg  实现动画 -->
  <svg>
    <path d="M0 50 L90 50" stroke="reba(0,0,0,0)" stroke-width="2" fill="none" marker-end="url(#arrowhead)">
      <animateMotion dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#path" />
      </animateMotion>
    </path>
    <defs>
      <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
        <polygon points="0 0, 10 3.5, 0 7" />
      </marker>
      <path id="path" d="M0 50 L90 50" />
    </defs>
  </svg>
  <!-- <svg>
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
        <path d="M0,0 L0,6 L9,3 z" fill="#000" />
      </marker>
    </defs>
    <line id="arrow-line" x1="10" y1="50" x2="100" y2="50" stroke="#000" stroke-width="2" marker-end="url(#arrow)">
      <animate id="arrow-animate" attributeName="x2" from="10" to="300" dur="3s" repeatCount="indefinite" />
    </line>
  </svg>
  <button id="start-btn">开始</button>
  <button id="stop-btn">停止</button> -->
  <script>
    var arrowAnimate = document.getElementById('arrow-animate');
    var startBtn = document.getElementById('start-btn');
    var stopBtn = document.getElementById('stop-btn');

    startBtn.addEventListener('click', function () {
      arrowAnimate.beginElement();
    });

    stopBtn.addEventListener('click', function () {
      arrowAnimate.endElement();
      // arrowAnimate.setAttribute('from', arrowAnimate.getAttribute('to'));
      // arrowAnimate.setAttribute('to', '90');
    });
    // var arrowAnimate = document.getElementById('arrow-animate');
    // var startBtn = document.getElementById('start-btn');
    // var stopBtn = document.getElementById('stop-btn');

    // startBtn.addEventListener('click', function () {
    //   arrowAnimate.beginElement();
    // });

    // stopBtn.addEventListener('click', function () {
    //   arrowAnimate.endElement();
    // });
  </script>
</body>

</html>